<template>
	<view class="order-tabs">
		<view
			v-for="(item, index) in tabs"
			:key="item.value"
			:class="['tab-item', { active: index === activeTab }]"
			@tap="$emit('onChange', item, index)">
			{{ item.label }}
		</view>
	</view>
</template>

<script>
export default {
	name: 'OrderTabs',
	props: {
		tabs: {
			type: Array,
			required: true
		},
		activeTab: {
			type: Number,
			default: 0
		}
	}
}
</script>

<style lang="scss" scoped>
.order-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 32rpx;
    color: #888;
    position: relative;
    &.active {
      color: #222;
      font-weight: bold;
      &::after {
        content: '';
        display: block;
        width: 60rpx;
        height: 6rpx;
        background: #3478f6;
        border-radius: 3rpx;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
    }
  }
}
</style> 